<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <meta name="apple-mobile-web-app-capable" content="yes" />
        <meta name="apple-mobile-web-app-status-bar-style" content="black" />
        <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
        
        <title class="title">Main Menu</title>
        
        <script src="/js/greyspots.js" type="text/javascript"></script>
        <link href="/css/greyspots.css" type="text/css" rel="stylesheet" />
        
        <script>
            //jslint white:true multivar:true for:true
            window.addEventListener('load', function () {
                'use strict';
                GS.ajaxJSON('/env/action_info', '', function (data, error) {
                    window.userData = data.dat;
                    GS.triggerEvent(window, 'user-data-loaded');
                });
                
                // if we're at an old envelope: remove the ?socket=true
                if (window.location.pathname.indexOf('/v1') === 0) {
                    document.getElementById('button-file-manager').setAttribute('href', '../all/file_manager/file_manager.html');
                    
                    document.getElementById('button-logout-user').setAttribute('href', '/env/auth?action=logout');
                }
            });
            
            window.addEventListener('user-data-loaded', function () {
                'use strict';
                var arrElements, i, len;
                
                document.getElementById('user-name-label').textContent = userData.username;
                
                arrElements = document.querySelectorAll('*[data-group], *[data-user]');
                
                for (i = 0, len = arrElements.length; i < len; i += 1) {
                    // remove links that have a group attached that is not in your group list (data.groups)
                    if (arrElements[i].hasAttribute('data-group')) {
                        if (userData.groups.indexOf(arrElements[i].getAttribute('data-group')) !== -1) {
                            arrElements[i].removeAttribute('data-group');
                        }
                        
                    // remove links that have a user attached that is not your username
                    } else if (arrElements[i].getAttribute('data-user') === userData.username) {
                        arrElements[i].removeAttribute('data-user');
                    }
                }
                
                arrElements = document.querySelectorAll('.group-container:not([hidden])');
                
                for (i = 0, len = arrElements.length; i < len; i += 1) {
                    if (i % 2 !== 0) {
                        arrElements[i].classList.add('grey');
                    }
                }
            });
        </script>
        
        <style>
            .group-container {
                padding: 1em;
                border: 1px solid #AAAAAA;
                -webkit-border-radius: 0.5em;
                -moz-border-radius: 0.5em;
                -ms-border-radius: 0.5em;
                -o-border-radius: 0.5em;
                border-radius: 0.5em;
            }
            .group-container > h4 {
                padding: 0;
                margin: 0;
            }
            .group-container > span.space {
                display: block;
                height: 1em;
            }
            .group-container.grey {
                background-color: #EEE;
            }
            
            [data-group], [data-user] {
                display: none;
            }
        </style>
    </head>
    <body>
        <gs-page>
            <gs-header>
                <div flex-horizontal>
                    <h3 class="title" flex>Main Menu</h3>
                    <label><center id="user-name-label"></center></label>
                    <gs-button id="button-logout-user" href="/env/auth/?action=logout" title="Sign out" icononly icon="sign-out" iconrotatedown target="_self"></gs-button>
                </div>
            </gs-header>
            <gs-body padded>
                <div id="user-app-list-container">
                    <br data-group="developer_g" />
                    <div class="group-container" data-group="developer_g">
                        <h4><i>Developer</i></h4>
                        <span class="space"></span>
                        
                        <gs-grid widths="1,1" reflow-at="500px" gutter>
                            <gs-block>
                                <gs-button target="_blank" data-group="developer_g" href="../developer_g/greyspots-1.1.1/documentation/index.html" jumbo>Documentation</gs-button>
                            </gs-block>
                            <gs-block>
                                <gs-button id="button-file-manager" target="_blank" data-group="developer_g" href="../all/file_manager/file_manager.html?socket=true" jumbo>File Manager</gs-button>
                            </gs-block>
                        </gs-grid>
                    </div>
                </div>
            </gs-body>
        </gs-page>
    </body>
</html>
